<template>
    <div class="dashboard-container" id="combo-app">
        <div class="container">
            <div class="tableBar">
                <el-input @keyup.enter.native="handleQuery" clearable placeholder="请输入套餐名称" style="width: 250px"
                    v-model="input">
                    <i @click="init" class="el-input__icon el-icon-search" slot="prefix" style="cursor: pointer"></i>
                </el-input>
                <div class="tableLab">
                    <span @click="deleteHandle('批量', null)" class="span-btn delBut non">批量删除</span>
                    <span @click="statusHandle('1')" class="span-btn blueBug non">批量启售</span>
                    <span @click="statusHandle('0')" class="span-btn delBut non" style="border:none;">批量停售</span>
                    <el-button @click="addSetMeal('add')" type="primary">
                        + 新建套餐
                    </el-button>
                </div>
            </div>
            <el-table :data="tableData" @selection-change="handleSelectionChange" class="tableBox" stripe>
                <el-table-column type="selection" width="25"></el-table-column>
                <el-table-column label="套餐名称" prop="name"></el-table-column>
                <el-table-column align="center" label="图片" prop="image">
                    <template slot-scope="{ row }">
                        <!-- <el-image :preview-src-list="[`http://192.168.174.100:8888/common/download?name=${row.image}`]" -->
                        <el-image :preview-src-list="[`https://serms.xyz/${row.image}`]" :src="getImage(row.image)"
                            style="width: auto; height: 40px; border:none;cursor: pointer;">
                            <div class="image-slot" slot="error">
                                <img src="./images/noImg.png" style="width: auto; height: 40px; border:none;">
                            </div>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column label="套餐分类" prop="categoryName"></el-table-column>
                <el-table-column label="套餐价" prop="price">
                    <template slot-scope="scope">
                        <span>￥{{ scope.row.price / 100 }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="售卖状态">
                    <template slot-scope="scope">
                        <span>{{ scope.row.status == '0' ? '停售' : '启售' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="最后操作时间" prop="updateTime">
                </el-table-column>
                <el-table-column align="center" label="操作" width="160">
                    <template slot-scope="scope">
                        <el-button @click="addSetMeal(scope.row.id)" class="blueBug" size="small" type="text">
                            修改
                        </el-button>
                        <el-button @click="statusHandle(scope.row)" class="blueBug" size="small" type="text">
                            {{ scope.row.status == '0' ? '启售' : '停售' }}
                        </el-button>
                        <el-button @click="deleteHandle('单删', scope.row.id)" class="delBut non" size="small"
                            type="text">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination :current-page.sync="page" :page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
                :total="counts" @current-change="handleCurrentChange" @size-change="handleSizeChange" class="pageList"
                layout="total, sizes, prev, pager, next, jumper"></el-pagination>
        </div>
    </div>
</template>

<script>
import { getSetmealPage, deleteSetmeal, setmealStatusByStatus } from '@/api/combo'

export default {
    name: 'combo',

    data() {
        return {
            input: '',
            counts: 0,
            page: 1,
            pageSize: 10,
            tableData: [],
            dishState: '',
            checkList: []
        }
    },
    computed: {},
    created() {
        this.init()
    },
    mounted() {
    },
    methods: {
        async init() {
            const params = {
                page: this.page,
                pageSize: this.pageSize,
                name: this.input ? this.input : undefined
            }
            await getSetmealPage(params).then(res => {
                if (String(res.code) === '1') {
                    this.tableData = res.data.records || []
                    this.counts = res.data.total
                }
            }).catch(err => {
                this.$message.error('请求出错了：' + err)
            })
        },
        getImage(image) {
            return `https://serms.xyz/${image}`
            // return `http://192.168.174.100:8888/common/download?name=${image}`
        },
        handleQuery() {
            this.page = 1;
            this.init();
        },
        // 添加
        addSetMeal(st) {
            if (st === 'add') {
                const menu = {
                    id: '5',
                    url: 'home/comboadd',
                    name: '添加套餐',
                    goBackFlag: true
                }
                this.$store.dispatch('menuHandle', menu)
            } else {
                const menu = {
                    id: '5',
                    url: 'home/comboadd?id=' + st,
                    name: '修改套餐',
                    goBackFlag: true
                }
                this.$store.dispatch('menuHandle', menu)
            }
        },

        // 删除
        deleteHandle(type, id) {
            if (type === '批量' && id === null) {
                if (this.checkList.length === 0) {
                    return this.$message.error('请选择删除对象')
                }
            }
            this.$confirm('确定删除该套餐, 是否继续?', '确定删除', {
                'confirmButtonText': '确定',
                'cancelButtonText': '取消',
            }).then(() => {
                deleteSetmeal(type === '批量' ? this.checkList.join(',') : id).then(res => {
                    if (res.code === 1) {
                        this.$message.success('删除成功！')
                        this.handleQuery()
                    } else {
                        this.$message.error(res.msg || '操作失败')
                    }
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                })
            }).catch(() => { });
        },

        //状态更改
        statusHandle(row) {
            let params = {}
            if (typeof row === 'string') {
                if (this.checkList.length == 0) {
                    this.$message.error('批量操作，请先勾选操作菜品！')
                    return false
                }
                params.ids = this.checkList.join(',')
                params.status = row
            } else {
                params.ids = row.id
                params.status = row.status ? '0' : '1'
            }
            this.$confirm('确认更改该套餐状态?', '提示', {
                'confirmButtonText': '确定',
                'cancelButtonText': '取消',
                'type': 'warning'
            }).then(() => {
                // 起售停售---批量起售停售接口
                setmealStatusByStatus(params).then(res => {
                    if (res.code === 1) {
                        this.$message.success('套餐状态已经更改成功！')
                        this.handleQuery()
                    } else {
                        this.$message.error(res.msg || '操作失败')
                    }
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                })
            }).catch(() => { });
        },

        // 全部操作
        handleSelectionChange(val) {
            let checkArr = []
            val.forEach((n) => {
                checkArr.push(n.id)
            })
            this.checkList = checkArr
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.init()
        },
        handleCurrentChange(val) {
            this.page = val
            this.init()
        }
    }
};
</script>

<style lang="css" scoped>
@import '@/assets/css/common.css';
@import '@/assets/css/page.css';
</style>